<!--
 * @Author: 黄宇/Hyuishine
 * @Date: 2022-05-16 15:08:03
 * @LastEditors: 徐伟杰
 * @LastEditTime: 2022-10-21 10:58:00
 * @Description: 
 * @Email: hyuishine@gmail.com
 * @Company: 3xData
 * @youWant: 技术服务机构=>单位基本信息
-->

<template>
  <!-- 单位基本信息 -->
  <view class="collapsePane">
    <!-- 字段标题 -->
    <view class="title" @click="status = !status">
      机构基本信息
      <view :class="status ? 'cuIcon-unfold' : 'cuIcon-right'" />
    </view>

    <!-- 折叠中的内容 -->
    <view class="pane" :class="status ? 'unfold' : 'fold'">

      <view class="card_form scrollPane">

        <!-- 单行表单项  -->
        <view class="formItem" v-for="formItem, i in formBuild" :key="i">
          <!-- 字段标题 -->
          <view class="label">{{ formItem.label }}</view>

          <!-- 输入区域 -->
          <template>
            <input class="content" v-if="formItem.type === 'input' && formItem.echo != true"
              :disabled="formItem.disabled" v-model="form[formItem.prop]" :placeholder="'请输入' + formItem.label" />
            <encapsulation-preview v-if="formItem.type === 'image'"
              :fileUrl="form[formItem.prop]"></encapsulation-preview>

            <ld-select :multiple="true" v-if="formItem.echo == true" :disabled="formItem.disabled" :list="typeRange"
              class="content" label-key="dictLabel" value-key="dictValue" placeholder="请选择"
              v-model="serverType_CN"></ld-select>
          </template>
        </view>
      </view>

    </view>
  </view>

</template>
<script>
import { baseApiUrl } from '@/config.js';
import EncapsulationPreview from '../components/EncapsulationPreview.vue';
export default {
  components: { EncapsulationPreview },
  name: 'baseInfo',
  data() {
    return {
      baseApiUrl: baseApiUrl,
      status: false, // true为开启
      formBuild: [
        { label: '机构名称', prop: 'name', type: 'input', require: true, disabled: true },
        { label: '统一信用代码', prop: 'code', type: 'input', require: true, disabled: true },
        { label: '所属区域', prop: 'areaName', type: 'input', require: true, disabled: true },
        { label: '机构地址', prop: 'address', type: 'input', require: true, disabled: true },
        { label: '服务类别', prop: 'serviceType', type: 'input', require: true, disabled: true, echo: true },
        { label: '法定代表人', prop: 'personName', type: 'input', require: true, disabled: true },
        { label: '法定代表人联系方式', prop: 'phone', type: 'input', require: true, disabled: true },
        { label: '联系人', prop: 'companyName', type: 'input', require: true, disabled: true },
        { label: '联系人联系方式', prop: 'companyPhone', type: 'input', require: true, disabled: true },
        { label: '营业执照附件', prop: 'businessLicense', type: 'image', require: true, disabled: true },
        // { label: '法人身份证人像面', prop: 'positivePhoto', type: 'image', require: true, disabled: true },
        // { label: '法人身份证国徽面', prop: 'backPhoto', type: 'image', require: true, disabled: true },
      ],
      typeRange: [], // 服务类别
      serverType_CN: '', // 服务类别回显
    }
  },
  props: {
    form: {
      type: Object,
      default: () => { }
    }
  },
  computed: {
    judgeType() {
      if (this.form.businessLicense) {
        if (this.form.businessLicense.indexOf('pdf') != '-1') {
          return false
        } else {
          return true
        }
      }
    }
  },
  methods: {
    // 获取服务机构类型
    getServerType() {
      this.$getDict('service_organization_type').then(res => {
        this.typeRange = res
        this.EchoType()
      })
    },
    EchoType() {
      this.serverType_CN = this.form?.serviceType.split(',')
    },
  }
}
</script>
<style lang="scss" scoped>
::v-deep .content>.input {
  background-color: #fff !important;
  border-radius: 0 !important;
}
</style>